<template>
  <div class="page-wrap">
    <div class="logo"></div>
    <div class="login-wrap">
      <p class="login-title">帐密登录</p>
      <a-input size="large" placeholder="用户名" />
      <p class="login-line8"></p>
      <a-input-password size="large" placeholder="密码" />
      <p class="login-line20"></p>
      <a-button size="large" type="primary" block> 登 录 </a-button>
      <div class="privacy">
        登录/注册即表示你同意<a class="_a" href="https://www.dongchediapp.com/cloud/page/agreement.html" target="_blank"> 用户协议</a>
        <nuxt-link to="/forget"><span class="forget-password">忘记密码</span></nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'login',
}
</script>

<style lang="scss" scoped>
.page-wrap {
  width: 100%;
  min-height: 100vh;
  .logo {
    position: relative;
    top: 80px;
    font-size: 32px;
    font-weight: bold;
    width: 320px;
    height: 92px;
    margin: 0 auto 28px;
    background: url('https://mokr.oss-cn-hangzhou.aliyuncs.com/common/logo-white.png') no-repeat;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .login-wrap {
    position: relative;
    top: 80px;
    width: 440px;
    margin: 0 auto;
    border-radius: 6px;
    background: #fff;
    padding: 24px 40px;
    .login-title {
      height: 48px;
      line-height: 48px;
      font-size: 18px;
      color: #333;
      font-weight: 700;
    }
    .login-line8 {
      height: 8px;
    }
    .login-line20 {
      height: 20px;
    }
    .privacy {
      height: 22px;
      line-height: 22px;
      font-size: 12px;
      color: #333;
      margin-top: 48px;
      ._a {
        color: #40a9ff;
      }
      .forget-password {
        float: right;
        cursor: pointer;
      }
    }
  }
}
</style>
